<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery的ajax</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1 align="center">jquery发送ajax请求</h1>

<pre>
        什么是ajax请求？
        AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

        简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

        使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

        同步请求：在网页上 发送一个请求   后台响应结果  网页整体刷新
        异步请求：通过js 发送请求， 网页局部刷新

        先简单说一下  ，讲完servlet 之后 ，再回过头 把ajax 彻底掌握
    </pre>

<p>
    这一节的学习目标   就是先看看  jquery 的 ajax 长什么样？  至于一些细节 原理 后面再说。
</p>






<hr>

<p>
    掌握jquery 发送ajax 的三种方式   重点  <br>
    1.  $.ajax(obj) <br>
        ajax方法内传的是一个 对象 ，这个对象有很多属性
    2.  $.get(url ,data, function(){}, dataType) <br>
        url  请求的地址   data 是携带的数据   function 是回调函数    dataType 是响应的数据格式 咱们常用json
    3.  $.post() <br>
</p>




<p>load方法 了解</p>

<button id="btn">load方法</button>

<div id="d1" style="color: red;">

</div>

<p>get方法  掌握</p>
<button id="btnget">get 方法</button>
<button id="btnpost">post 方法</button>
<button id="btnajax">ajax 方法</button>
<!-- 注册的时候 校验邮箱可用不可用？   使用  ajax 发送请求 查询数据库中 有没有 这个邮箱的记录  如果有
说明 这个邮箱被注册过了，不可使用，如果没有这个邮箱的记录 ，那么这个邮箱就可以使用。

这个过程 是需要发送请求到后台程序  后台程序查询数据库  并把查询结果 响应到页面上
-->
邮箱: <input type="email" id="email" placeholder="请输入你的邮箱">   <span id="sp"></span>


<script>
    $(function(){
        // load
        $("#btn").click(function(){
            $("#d1").load("loaddemo.txt");
        });

        //get
        $("#btnget").click(function(){
            var email = $("#email").val();
            $.get('/ajax',{"email":email},function (data){
                // var obj = eval("("+data+")");
                // if(obj.result){
                //     $("#sp").html('该邮箱可用');
                // }else{
                //     $("#sp").html('该邮箱不可用');
                // }

                //alert(data.result);

                if(data.result){
                        $("#sp").html('该邮箱可用');
                    }else{
                        $("#sp").html('该邮箱不可用');
                    }
            },"json");

        });

        //post
        $("#btnpost").click(function(){
            var email = $("#email").val();
            $.post('/ajax',{"email":email},function (data){
                //alert(data.result);

                if(data.result){
                    $("#sp").html('该邮箱可用');
                }else{
                    $("#sp").html('该邮箱不可用');
                }

            },"json");

        });

        //ajax
        $("#btnajax").click(function (){
            var email = $("#email").val();
            var ajax={
                "url":"/ajax",
                "data":{"email":email},
                "success":function (result,status,xhr){
                    if(result.result){
                        $("#sp").html('该邮箱可用');
                    }else{
                        $("#sp").html('该邮箱不可用');
                    }
                },
                "dataType":"json",
                "type":"post"
            };
            $.ajax(ajax);
        });

    });
</script>
</body>
</html>